<!-- layouts/default.vue 和 app.vue 同时存在, 使用app.vue -->
<template>
  <div>
    <!-- 公共头部 -->
    <CommonHeader v-model:activeIndex="navActiveIndex" />
    <!-- 动态页面 -->
    <div class="_router-view-page_">
      <!-- 路由匹配到的组件 -->
      <slot></slot>
      <CommonFooter />
    </div>
  </div>
</template>

<script lang="ts" setup>
import CommonHeader from "@/layouts/Header/index.vue";
import CommonFooter from "@/layouts/Footer/index.vue";

import { findPathIndex } from "@/router";

const navActiveIndex = ref(findPathIndex(useRoute().path) || 0);
</script>

<style lang="scss">
@import "@/style/index.scss";
body {
  min-height: 100vh;
  background-color: var(--page-bg);
}
/** 页面渐变出现, 需要在每一个页面上加这个类 */
._page_ {
  animation: fade-in 0.6s;
}
@keyframes fade-in {
  from {
    opacity: 0;
    filter: blur(1rem);
  }
}
/** 页面顶部距离一个导航栏高度 */
._router-view-page_ {
  padding-top: $navigation-head-height;
  min-width: $screen-min-width;
}
</style>
